<template>
  <div class = "search-div">
    <!--前一个-->
    <div class = "next-button">
      <i-left @click = "back" theme = "outline" class = " is-active" size = "17" :fill = "props.textColor" />
    </div>
    <!--后一个-->
    <div class = "next-button">
      <i-right @click = "forward" theme = "outline" class = " is-active" size = "17" :fill = "props.textColor" />
    </div>
    <!--搜索框-->
    <el-popover
        placement = "bottom"
        popper-class = "clear-padding"
        :width = "300"
        trigger = "click"
    >
      <template #reference>
        <el-input class = "search-input" prefix-icon = "i-search" v-model = "searchKeyword"
                  placeholder = "我是搜索框" />
      </template>
      <search-suggestions />

    </el-popover>
  </div>
</template>

<script setup>
import SearchSuggestions from "./SearchHistorySuggestions";

// 图标color从props传过来
const props = defineProps({
  textColor: {
    type: String,
    default: function () {
      return '#808080'
    }
  }
})
//前进后退按钮
import {ref} from "vue";

function back() {
  window.history.back()
}

function forward() {
  window.history.forward()
}

let searchKeyword = ref('')
</script>

<style lang = "less" scoped>
.search-div {
  display: flex;
  align-items: center;
  position: relative;

  input::-webkit-input-placeholder {
    /* WebKit browsers，webkit内核浏览器 */
    color: rgba(199, 58, 58, 0.6);
    font-size: 10px;
    font-weight: lighter;
  }

  > * {
    margin-left: 10px;
  }

  .next-button {
    height: 26px;
    line-height: 26px;
    background-color: rgba(82, 82, 81, 0.2);
    border-radius: 50%;

    > * {
      width: 26px;
      height: 26px;
      opacity: .4;
      line-height: 26px;
      text-align: center;
    }
  }

  .is-active {
    opacity: 1;
  }

  :deep(.el-input__wrapper) {
    background-color: rgba(109, 107, 107, 0.04);
  }

  :deep(.el-input__inner) {
    color: v-bind('props.textColor');
  }


}


</style>

<style lang = "less">
//清除popover的padding
.el-popover.clear-padding {
  padding: 0 !important;
}
</style>